<template lang='pug'>
.main-charts
  //- #stepCharts(ref="stepCharts" v-if="echartOpts")
</template>

<script>
/**
* @name FlowDiagram
* @desc 展示流程进度条
* @author linmn
*/
// 引入 ECharts 主模块
import {renderGraph} from './graph.js'
// import echarts from 'echarts'
var echarts = require('echarts')
// const echarts = require('echarts/lib/echarts')
// // 引入柱状图
// require('echarts/lib/chart/graph')
// // 引入提示框和标题组件
// require('echarts/lib/component/tooltip')
// require('echarts/lib/component/title')

export default {
  name: 'FlowDiagram',
  components: {
    echarts
  },
  props: {
    stepDatas: {
      type: Array,
      default: () => ([])
    }, // 节点数据
    transDatas: {
      type: Array,
      default: () => ([])
    }, // 流转数据
    topic: {
      type: String,
      defalut: '流程图'
    },
    current: {
      type: Object,
      default: () => ({})
    } // 当前节点
  },
  mounted () {
    this.initCharts()
  },
  computed: {
    stepPoints () {
      let initX = 200
      let initY = 100
      return this.stepDatas.map((sData, index) => {
        const _itemStyle = sData.status === 'ACTIVATY' ? {
          itemStyle: { color: '#47b1f6' }
        } : sData.status === 'FINISH' ? {
          itemStyle: { color: '#83cffe' }
        } : {
          itemStyle: { color: '#eee' }
        }
        return {
          name: sData.name,
          x: initX, // 节点用户绘画时候的x轴位置
          y: initY * index, // 节点用户绘画时候的y轴位置
          ..._itemStyle, // 节点背景颜色
          symbol: 'circular' // 标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none', 默认是circle
        }
      })
    }, // 节点列表
    transFor () {
      return this.transDatas.map(tData => {
        return {
          source: `${tData.sourceStepDefineId}`,
          target: `${tData.targetStepDefineId}`,
          symbolSize: [5, 20],
          label: {
            normal: {
              show: true // 显示线上数据
            }
          }
          // ...isAct
        }
      })
    } // 流转列表
  },
  data () {
    return {
      // stepPoints: [], // 节点列表
      // transFor: [], // 流转列表
      echartOpts: {}, // 流程图配置数据
      stepCharts: null // 流程图对象
    }
  },
  methods: {
    initCharts () {
      let timer = null
      if (this.stepCharts) {
        this.settingChartsOpts()
        clearTimeout(timer)
        console.log(222)
      } else {
        this.stepCharts = echarts.init(document.getElementById('stepCharts'))
        timer = setTimeout(() => {
          this.initCharts()
        }, 300)
      }
    },
    /* 配置流程图选项 */
    settingChartsOpts () {
      const echartOpts = renderGraph({
        data: this.stepPoints,
        link: this.transFor
      })
      this.echartOpts = echartOpts
      console.info('echartOpts', echartOpts)
      this.renderCharts(echartOpts)
    },
    renderCharts (opt) {
      this.stepCharts.setOption(opt)
    }
  }
}
</script>

<style lang='sass' scoped>

</style>
